<template>
    <NForm ref="formRef" :model="form" inline size="small" :show-label="false" class="mt-4">
        <NGrid x-gap="12" responsive="screen" item-responsive>
            <NFormItemGi span="24 s:12 m:6" prop="uid">
                <NInput v-model:value="form.uid" clearable placeholder="UID"></NInput>
            </NFormItemGi>
            <NFormItemGi span="24 s:12 m:6" prop="mobileNumber">
                <NInput v-model:value="form.mobileNumber" clearable placeholder="手机号"></NInput>
            </NFormItemGi>
            <NFormItemGi span="24 s:12 m:6" prop="email">
                <NInput v-model:value="form.email" clearable placeholder="邮箱"></NInput>
            </NFormItemGi>
            <NFormItemGi span="24 s:12 m:6" prop="inviteCode">
                <NInput v-model:value="form.inviteCode" clearable placeholder="邀请码"></NInput>
            </NFormItemGi>
            <NFormItemGi span="24 s:12 m:6" prop="time">
                <NDatePicker
                    v-model:value="form.time"
                    type="daterange"
                    start-placeholder="创建开始日期"
                    end-placeholder="创建结束日期"
                    clearable
                />
            </NFormItemGi>
            <NFormItemGi span="24 s:12 m:6">
                <NButton type="primary" @click="search">
                    <template #icon>
                        <NIcon>
                            <Search />
                        </NIcon>
                    </template>
                    查询
                </NButton>
                <NButton @click="reset" class="ml-2">重置</NButton>
            </NFormItemGi>
        </NGrid>
    </NForm>
    <NDivider style="margin-top: 0px" />
    <NFlex justify="space-between" v-if="false">
        <NFlex>
            <NButton type="primary" size="small">
                <template #icon>
                    <NIcon>
                        <PlusSharp />
                    </NIcon>
                </template>
                新建
            </NButton>
            <NButton secondary size="small">批量导入</NButton>
        </NFlex>
        <NButton secondary size="small">
            <template #icon>
                <NIcon>
                    <Download />
                </NIcon>
            </template>
            下载
        </NButton>
    </NFlex>
    <NDataTable class="mt-4" :columns="columns" :data="list" :loading="loading"></NDataTable>

    <NFlex justify="flex-end" class="mt-4">
        <NPagination
            v-model:page="pager.pageIndex"
            v-model:page-size="pager.pageSize"
            :item-count="total"
            show-size-picker
            :page-sizes="[10, 20, 50, 100]"
        />
    </NFlex>

    <DetailDrawer v-model="detailVisible" :user-id="userId" @refresh="queryData" />
</template>

<script setup lang="tsx">
import { reactive, ref, watch } from 'vue'
import dayjs from 'dayjs'
import { Search, Download } from '@vicons/carbon'
import { PlusSharp } from '@vicons/material'
import { NDivider, NTag, NFlex, NButton, type DataTableColumns, type FormInst } from 'naive-ui'
import { queryUserLit } from '@/api/user'
import DetailDrawer from './DetailDrawer.vue'

defineOptions({
    name: 'UserList'
})

const formRef = ref<FormInst | null>(null)
const form = ref<
    Api.User.UserSearchParams & {
        time: null | [number, number]
    }
>({
    uid: null,
    mobileNumber: null,
    email: null,
    inviteCode: null,
    startTime: null,
    endTime: null,
    time: null
})

const columns: DataTableColumns<Api.User.UserList> = [
    {
        title: 'UID',
        key: 'uid'
    },

    {
        title: '手机号',
        key: 'mobileNumber'
    },
    {
        title: '邮箱',
        key: 'email'
    },

    {
        title: '邀请码',
        key: 'inviteCode'
    },
    {
        title: '创建日期',
        key: 'createdAt',
        render(row) {
            return dayjs(row.createdAt * 1000).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    {
        title: '状态',
        key: 'status',
        render: row => {
            if (row.status === 1)
                return (
                    <NTag size="small" type="success">
                        可登录
                    </NTag>
                )
            if (row.status === 2)
                return (
                    <NTag size="small" type="warning">
                        注销中
                    </NTag>
                )
            if (row.status === 3) return <NTag size="small">已注销</NTag>
            if (row.status === 4)
                return (
                    <NTag size="small" type="error">
                        禁止登录
                    </NTag>
                )
        }
    },

    {
        title: '操作',
        key: 'actions',
        render: row => {
            return (
                <NFlex>
                    <NButton onClick={() => showDetail(row.userId)} size="small">
                        详情
                    </NButton>
                </NFlex>
            )
        }
    }
]

const list = ref<Api.User.UserList>([])
const total = ref(0)
const loading = ref(false)
const pager = reactive({
    pageIndex: 1,
    pageSize: 10
})
const queryData = async () => {
    const { time, ...opts } = form.value
    loading.value = true
    const [err, res] = await queryUserLit({
        ...opts,
        ...pager,
        startTime: time ? Math.ceil(time[0] / 1000) : undefined,
        endTime: time ? Math.ceil(time[1] / 1000) : undefined
    })
    loading.value = false
    if (!err) {
        const { count, list: dataList } = res
        list.value = dataList
        total.value = count
    }
}
queryData()
watch(pager, queryData)

const search = () => {
    pager.pageIndex = 1
    queryData()
}

const reset = () => {
    form.value = {
        uid: null,
        mobileNumber: null,
        email: null,
        inviteCode: null,
        startTime: null,
        endTime: null,
        time: null
    }
    pager.pageIndex = 1
    queryData()
}

const userId = ref<number>()
const detailVisible = ref(false)
function showDetail(id: number) {
    userId.value = id
    detailVisible.value = true
}
</script>
